/* 图表页面思路分析: 从左往右,从上往下依次加载图表数据
1.班级概览
2.学生信息列表
    折线图 :  x轴：姓名   y轴：期望薪资+实际薪资
    饼图 ： 省份信息
    地图 ： 县信息

3.学生成绩列表
    柱状图 :  x轴：小组   y轴：分数成绩

4.点击柱状图右上角三个小点,可以实现 切换成绩效果
*/
const token = localStorage.getItem('CMSTOKEN')
if (!token) {
    alert('亲，您还没登录哦！')
    location.href = '/login.html'
}

//发送ajax请求
axios({
	url: '/student/overview',
}).then(({ data: { data: res } }) => {
	console.log(res)
	document.querySelector('.total').innerHTML = res.total
	document.querySelector('.avgSalary').innerHTML = res.avgSalary
	document.querySelector('.avgAge').innerHTML = res.avgAge
	document.querySelector('.proportion').innerHTML = res.proportion
})

axios({
    url:'/student/list'
}).then(({data:{data:res}})=>{
    const lineObj={
        names:[],
        salary:[],
        truesalary:[]
    }

const pieArr=[]
       //遍历数据
       res.forEach(item =>{
        lineObj.names.push(item.name)
        lineObj.salary.push(item.salary)
        lineObj.truesalary.push(item.truesalary)
        const index = pieArr.findIndex(val => val.name === item.province)
        if(index === -1){
            pieArr.push({
                name:item.province,
                value:1
            })
        }else{
            pieArr[index].value++
        }
       })
setLine(lineObj)
setPie(pieArr)
    
})

   /* 折线图 */
const setLine = (data) => {
	// 3.1 基于准备好的dom，初始化echarts实例
	let myChart = echarts.init(document.querySelector('.line'));

	option = {
		//鼠标移入提示
		tooltip: {
			trigger: 'axis',
			position: function (pt) {
				return [pt[0], '10%']
			}
		},
		// 标题
		title: {
			text: '薪资 Salary',
			textStyle: {
				color: '#6d767e'
			}
		},
		//x轴数据: 必须
		xAxis: {
			type: 'category', // 类别
			boundaryGap: false, // 两侧留白
			data: data.names
		},
		//y轴数据：必须
		yAxis: {
			type: 'value',
			boundaryGap: [0, '50%'] // Y轴留白，会影响最大值，最小值
		},
		// 顶部小提示
		legend: { top: 20 },
		// 缩放工具栏
		dataZoom: [
			{
				// inside鼠标滚轮实现缩放，slider通过滑动条实现缩放(默认值)
				type: 'slider',
				start: 0, // 起始位置
				end: 10 // 结束位置
			}
		],
		series: [
			{
				name: '期望薪资',
				type: 'line',
				symbol: 'none',
				smooth: true, //设置折线圆角
				itemStyle: {
					color: '#ee6666'
				},
				data: data.salary
			}, {
				name: '实际薪资',
				type: 'line',
				symbol: 'none',
				smooth: true,
				itemStyle: {
					color: '#5470c6'
				},
				data: data.truesalary
			}
		]
	}
	// 3.3使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
}
//饼图
const setPie = (data) => {
	// 3.1 基于准备好的dom，初始化echarts实例
	let myChart = echarts.init(document.querySelector('.pie'));

	option = {
        // 标题组件
        title: { 
          text: '籍贯 Hometown',
          textStyle: {
            color: '#6d767e'
          }
        },
        // 提示框组件
        tooltip: {
          trigger: 'item',
          // {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等
          formatter: '{a} <br/>{b} <b>{c}</b>人 占比{d}%'
        },
        // 数据
        series: [
          {
            name: '各地人员分布',
            type: 'pie',
            radius: ['10%', '60%'],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 4
            },
            data
          }
        ]
      };
      
	// 3.3使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
}//柱状图
const setBar = (data) => {
	// 3.1 基于准备好的dom，初始化echarts实例
	let myChart = echarts.init(document.querySelector('.barChart'));

	option = {
        // 提示框组件
        tooltip: {
          trigger: 'axis'
        },
        // 图例组件
        legend: {},
        // 类似于 pdding的效果
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          }
        ],
        yAxis: [
          {
            type: 'value',
             axisLabel: {
              formatter: '{value} 分'
            },
            min: 0,
            max: 100,
            interval: 10
          },
          {
            type: 'value',
             axisLabel: {
              formatter: '{value} 人'
            },
            min: 0,
            max: 10,
            interval: 1
          }
        ],
        series: [
          {
            name: '平均分',
            type: 'bar',
            barWidth: 15,
            data: data.avgScore
          },
          {
            name: '低于60分人数',
            type: 'bar',
            barWidth: 15,
            yAxisIndex: 1,
            data: data.group
          },
          {
            name: '60分到80分之间人数',
            type: 'bar',
            barWidth: 15,
            yAxisIndex: 1,
            data: data.gt60
          },
          {
            name: '高于80分人数',
            type: 'bar',
            barWidth: 15,
            yAxisIndex: 1,
            data: data.gt80
          }
        ]
      }
      
	// 3.3使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
}


//根据次数获取对应组的成绩
const batch =(batch =1) =>{
    axios({
        url:'/score/batch',
        params:{
            batch
        }
    }).then(({data:{data:res}})=>{
setBar(res)
    })
}
batch()

//获取ul标签
const ul =document.querySelector('#batch')

//给 span标签注册点击事件
document.querySelector('span.btn').addEventListener('click',function(){
    if(ul.style.display === 'block'){
        ul.style.display = 'none'
    }else{
        ul.style.display = 'block'
    }
})

//获取ul里面所有li
ul.querySelectorAll('li').forEach((item,index)=>{
    //给每一个li注册点击事件
    item.addEventListener('click',function(){
        //调用获取第几次成绩的函数
        batch(index +1)
    })
})      